﻿@{
    ViewBag.Title = "角色";
    Layout = "~/Views/Shared/_LayuiLayout.cshtml";
}

<blockquote class="layui-elem-quote">
    <div class="pos-r h-38" id="topbar">
        <span>
            @{
                bool isHasRow; // 是否有行操作
            }
            @Html.SysMenuButton(MenuPosType.行列, out isHasRow)
        </span>
        <span class="pos-a pos-right">
            <span class="layui-inline">
                <input type="text" class="layui-input" name="keyword" id="txtKeyword" autocomplete="off" placeholder="请输入角色名">
            </span>
            <span class="layui-inline">
                <button type="button" class="layui-btn" data-type="Search"><i class="layui-icon">&#xe615;</i>搜索</button>
            </span>
            <span class="layui-inline">
                <button type="button" class="layui-btn" data-type="Reload"><i class="layui-icon">&#xe669;</i>刷新</button>
            </span>
        </span>
    </div>
</blockquote>

<!-- 数据表格 -->
<table id="tbList" lay-filter="tbList"></table>

<script type="text/html" id="barOperation">
    <div class="layui-btn-group">
        <button type="button" class="layui-btn layui-btn-sm" lay-event="Edit" title="修改"><i class="layui-icon">&#xe642;</i></button>
        <button type="button" class="layui-btn layui-btn-sm" lay-event="SetPerm" title="设置角色权限"><i class="layui-icon">&#xe716;</i></button>
        <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="Delete" title="删除"><i class="layui-icon">&#xe640;</i></button>
    </div>
</script>
<script type="text/html" id="tmplSwitchEnable">
    <input type="checkbox" name="IsEnable" value="{{d.ID}}" lay-skin="switch"
           lay-text="启用|禁用" lay-filter="isEnable" {{ d.IsEnable ? 'checked' : '' }}>
</script>
@section scripts{
    <script>
        var $, layer;
        layui.use(['table', 'form'], function () {
            var table = layui.table
              , form = layui.form;
            $ = layui.jquery;
            layer = layui.layer;

            //执行渲染
            table.render({
                elem: '#tbList',
                height: 'full-128',
                url: '@Url.Action("GetList", "Role")',
                method: 'post',
                page: true,
                cols: [[
                    { type: 'checkbox', width: 50, fixed: 'left' },
                    { field: 'RoleName', title: '角色名' },
                    { field: 'RoleCode', title: '角色编号', width: 200 },
                    { field: 'RoleLevel', title: '角色级别', width: 110, sort: true },
                    { field: 'RoleExplain', title: '角色说明' },
                    { field: 'IsEnable', title: '是否启用', sort: true, width: 110, unresize: true, templet: '#tmplSwitchEnable' },
                    { title: '操作', width: 200, fixed: 'right', align: 'center', unresize: true, toolbar: '#barOperation' },
                ]]
            });

            //刷新
            reload = function () {
                table.reload('tbList');
            }

            var active = {
                Reload: function () {
                    reload();
                },
                Search: function () {
                    table.reload('tbList', { where: { RoleName: $('#txtKeyword').val() } });
                },
                Add: function () {
                    layer_show('', '添加角色', '@Url.Action("AddOrEditView", "Role")', '100%', '100%');
                },
                Delete: function () {
                    var checkStatus = table.checkStatus('tbList');//获取表格选中行
                    var data = checkStatus.data;//获取选中行的数据
                    if (CheckMultiple(data.length, layer, '删除')) {
                        layer.confirm('确认要删除吗?', function (index) {
                            $.post(
                                '@Url.Action("DeleteList", "Role")',
                                { IdList: GetIdList(data) },
                                function (result) {
                                    layer.close(index);
                                    if (result.Success) {
                                        layer.msg(result.Message, { icon: 1, time: 3000 });
                                        reload();
                                    } else {
                                        layer.alert(result.Message, { icon: 2 });
                                    }
                                });
                        });
                    }
                },
            };

            //监听表头按钮点击
            $('#topbar .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            //监听工具条
            table.on('tool(tbList)', function (obj) {
                var data = obj.data;
                var data = obj.data;
                switch (obj.event) {
                    case 'Edit': layer_show('', '修改', '@Url.Action("AddOrEditView", "Role")' + '?Id=' + data.Id, '100%', '100%'); break;
                    case 'SetPerm': layer_show('', '设置角色权限', '@Url.Action("SetPermissions", "Role")' + '?Id=' + data.Id, '100%', '100%'); break; break;
                    case 'Delete':
                        layer.confirm('确认要删除吗?', function (index) {
                            $.post(
                                '@Url.Action("DeleteList", "Role")',
                                { IdList: data.Id },
                                function (result) {
                                    layer.close(index);
                                    if (result.Success) {
                                        layer.msg(result.Message, { icon: 1, time: 3000 });
                                        reload();
                                    } else {
                                        layer.alert(result.Message, { icon: 2 });
                                    }
                                });
                        });
                        break;
                }
            });
            //form界面启用按钮事件
            form.on('switch(isEnable)', function (data) {
                $.post("@Url.Action("IsEnable", "Role")", { Id: data.value, check: data.elem.checked },
                    function (res) {
                        if (res.Success)
                            layer.msg(res.Message, { icon: 1, time: 1000 });
                        else
                            layer.alert(res.Message, { icon: 2 });
                    });
            });
            //获取并拼接数据中id的值
            function GetIdList(data) {
                var IdList = "", douhao = "";
                for (var i = 0; i < data.length; i++) {
                    IdList += douhao + data[i].Id; douhao = ',';
                }
                return IdList;
            }
        });
    </script>
}

